<%@ page import="com.ama.pojo.Staff" %>
<%@ page import="com.ama.dao.CostDao" %>
<%@ page import="com.ama.utils.SpringUtils" %>
<%@ page import="com.ama.pojo.Cost" %>
<%@ page import="com.ama.utils.DateUtil" %>
<%@ page import="com.ama.dao.ApplyDao" %>
<%@ page import="com.ama.pojo.Apply" %>
<%@ page import="com.ama.utils.NumberUtils" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>首页</title>
    <link rel="icon" href="favicon.ico" type="image/ico">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/materialdesignicons.min.css" rel="stylesheet">
    <link href="../css/style.min.css" rel="stylesheet">
    <!--图表插件-->
    <script type="text/javascript" src="../js/Chart.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/main.min.js"></script>
</head>
<%
    Staff staff = (Staff) session.getAttribute("user");
    CostDao costDao = SpringUtils.getBean(CostDao.class);
    Cost cost = costDao.selectByPrimaryKey(staff.getCostId());
    ApplyDao applyDao = SpringUtils.getBean(ApplyDao.class);
    Apply apply = applyDao.selectById(staff.getApplyId());

%>

<body>

<div class="container-fluid p-t-15">

    <%
        if (apply.getApplyState() == null || apply.getApplyState() == 0) {
    %>
    <div class="row">
        <div class="col-sm-6 col-md-3">
            <div class="card bg-primary">
                <div class="card-body clearfix">
                    <div class="pull-right">
                        <p class="h6 text-white m-t-0">待交租费金额</p>
                        <p class="h3 text-white m-b-0 fa-1-5x">0</p>
                    </div>
                    <div class="pull-left"><span class="img-avatar img-avatar-48 bg-translucent"><i
                            class="mdi mdi-currency-cny fa-1-5x"></i></span></div>
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-md-3">
            <div class="card bg-danger">
                <div class="card-body clearfix">
                    <div class="pull-right">
                        <p class="h6 text-white m-t-0">租房到期日期</p>
                        <p class="h3 text-white m-b-0 fa-1-5x">暂未租房</p>
                    </div>
                    <div class="pull-left"><span class="img-avatar img-avatar-48 bg-translucent"><i
                            class="mdi mdi-account fa-1-5x"></i></span></div>
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-md-3">
            <div class="card bg-success">
                <div class="card-body clearfix">
                    <div class="pull-right">
                        <p class="h6 text-white m-t-0">上次交易日期</p>
                        <p class="h3 text-white m-b-0 fa-1-5x">无记录</p>
                    </div>
                    <div class="pull-left"><span class="img-avatar img-avatar-48 bg-translucent"><i
                            class="mdi mdi-arrow-down-bold fa-1-5x"></i></span></div>
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-md-3">
            <div class="card bg-purple">
                <div class="card-body clearfix">
                    <div class="pull-right">
                        <p class="h6 text-white m-t-0">上次交易金额</p>
                        <p class="h3 text-white m-b-0 fa-1-5x">无记录</p>
                    </div>
                    <div class="pull-left"><span class="img-avatar img-avatar-48 bg-translucent"><i
                            class="mdi mdi-comment-outline fa-1-5x"></i></span></div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h4>租费金额明细</h4>
                </div>
                <div class="card-body">
                    <canvas class="js-chartjs-pie"></canvas>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h4>交易历史记录</h4>
                </div>
                <div class="card-body">
                    <canvas class="js-chartjs-bars"></canvas>
                </div>
            </div>
        </div>

    </div>
    <%
    } else {
    %>
    <div class="row">
        <div class="col-sm-6 col-md-3">
            <div class="card bg-primary">
                <div class="card-body clearfix">
                    <div class="pull-right">
                        <p class="h6 text-white m-t-0">待交租费金额</p>
                        <p class="h3 text-white m-b-0 fa-1-5x"><%=cost.getCostShouldpay()%>
                        </p>
                    </div>
                    <div class="pull-left"><span class="img-avatar img-avatar-48 bg-translucent"><i
                            class="mdi mdi-currency-cny fa-1-5x"></i></span></div>
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-md-3">
            <div class="card bg-danger">
                <div class="card-body clearfix">
                    <div class="pull-right">
                        <p class="h6 text-white m-t-0">租房到期日期</p>
                        <p class="h3 text-white m-b-0 fa-1-5x"><%=DateUtil.dateToStr(cost.getCostEnddate())%>
                        </p>
                    </div>
                    <div class="pull-left"><span class="img-avatar img-avatar-48 bg-translucent"><i
                            class="mdi mdi-account fa-1-5x"></i></span></div>
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-md-3">
            <div class="card bg-success">
                <div class="card-body clearfix">
                    <div class="pull-right">
                        <p class="h6 text-white m-t-0">上次交易日期</p>
                        <p class="h3 text-white m-b-0 fa-1-5x">
                            <%
                                if (cost.getCostPaydate() != null) {
                            %>
                            <%=DateUtil.dateToStr(cost.getCostPaydate())%>
                            <%
                            } else {
                            %>
                            暂无
                            <%
                                }
                            %>
                        </p>
                    </div>
                    <div class="pull-left"><span class="img-avatar img-avatar-48 bg-translucent"><i
                            class="mdi mdi-arrow-down-bold fa-1-5x"></i></span></div>
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-md-3">
            <div class="card bg-purple">
                <div class="card-body clearfix">
                    <div class="pull-right">
                        <p class="h6 text-white m-t-0">上次交易金额</p>
                        <p class="h3 text-white m-b-0 fa-1-5x">
                            <%
                                if (cost.getCostLastpay() != null && cost.getCostLastpay()!=0) {
                            %>
                            <%=cost.getCostLastpay()%>
                            <%
                            } else {
                            %>
                            暂无
                            <%
                                }
                            %>

                        </p>
                    </div>
                    <div class="pull-left"><span class="img-avatar img-avatar-48 bg-translucent"><i
                            class="mdi mdi-comment-outline fa-1-5x"></i></span></div>
                </div>
            </div>
        </div>
    </div>
    <%
        }
    %>

    <div class="row">

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h4>租费金额明细</h4>
                </div>
                <div class="card-body">
                    <canvas class="js-chartjs-pie"></canvas>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h4>交易历史记录</h4>
                </div>
                <div class="card-body">
                    <canvas class="js-chartjs-bars"></canvas>
                </div>
            </div>
        </div>

    </div>


</div>

<%
    if (apply.getApplyState() == null || apply.getApplyState() == 0) {
%>
<script type="text/javascript">
    $(document).ready(function (e) {
        var $dashChartpieCnt = jQuery('.js-chartjs-pie')[0].getContext('2d'),
            $dashChartbarsCnt = jQuery('.js-chartjs-bars')[0].getContext('2d');

        var $dashChartpieData = {
            labels: ["租金", "水费", "电费", "税费"],
            datasets: [
                {
                    label: '租费金额明细',
                    backgroundColor: ['rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(245,198,182,1)'],
                    data: [0, 0, 0, 0]
                }
            ]
        };

        var $dashChartbarsData = {
            labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            datasets: [
                {
                    label: '缴费',
                    data: [200, 0, 500, 0, 0, 1000, 620, 0, 320, 260, 906, 0],
                    borderColor: '#358ed7',
                    backgroundColor: 'rgba(53, 142, 215, 0.175)',
                    borderWidth: 1,
                    fill: false,
                    lineTension: 0.5
                }
            ]
        };

        new Chart($dashChartpieCnt, {
            type: 'pie',
            data: $dashChartpieData
        });

        var mybarChart = new Chart($dashChartbarsCnt, {
            type: 'bar',
            data: $dashChartbarsData,
        });
    });
</script>
<%
} else {
%>
<script type="text/javascript">
    $(document).ready(function (e) {
        var $dashChartpieCnt = jQuery('.js-chartjs-pie')[0].getContext('2d'),
            $dashChartbarsCnt = jQuery('.js-chartjs-bars')[0].getContext('2d');

        var $dashChartpieData = {
            labels: ["租金", "水费", "电费", "税费"],
            datasets: [
                {
                    label: '租费金额明细',
                    backgroundColor: ['rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(245,198,182,1)'],
                    data: [<%=NumberUtils.round(cost.getCostAmount()*3,2)%>, <%=NumberUtils.round(cost.getCostWater()*3,2)%>, <%=NumberUtils.round(cost.getCostElec()*3,2)%>, <%=cost.getCostTaxamount()%>]
                }
            ]
        };

        var $dashChartbarsData = {
            labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            datasets: [
                {
                    label: '缴费',
                    data: [200, 0, 500, 0, 0, 1000, 620, 0, 320, 260, 906, 0],
                    borderColor: '#358ed7',
                    backgroundColor: 'rgba(53, 142, 215, 0.175)',
                    borderWidth: 1,
                    fill: false,
                    lineTension: 0.5
                }
            ]
        };

        new Chart($dashChartpieCnt, {
            type: 'pie',
            data: $dashChartpieData
        });

        var mybarChart = new Chart($dashChartbarsCnt, {
            type: 'bar',
            data: $dashChartbarsData,
        });
    });
</script>
<%
    }
%>
</body>
</html>